<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Html5 Lesson 05 (Geolocation API)</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <script type="text/javascript" src="http://ditu.google.cn/maps/api/js?sensor=true&language=en"></script>
    <style>
        body {
            font: 100% "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
            margin: 0;
        }

        #log {
            background-color: gray;
            color: white;
            padding: 10px;
            margin-left: 20px;
            display: inline-block;
        }

        header {
            background: #FFCC99;
            color: white;
            -moz-box-shadow: 0 2px 8px -3px rgba(0, 0, 0, .5), 0 1.4em 2em -0.7em rgba(255, 255, 255, .2) inset;
            -webkit-box-shadow: 0 2px 8px -3px rgba(0, 0, 0, .5), 0 1.4em 2em -0.7em rgba(255, 255, 255, .2) inset;
            box-shadow: 0 2px 8px -3px rgba(0, 0, 0, .5), 0 1.4em 2em -0.7em rgba(255, 255, 255, .2) inset;
            text-shadow: 1px 1px 1px #444;
        }

        header h1, header h2 {
            display: inline-block;
            padding: 12px 15px;
            font-size: 105%;
            line-height: 1;
            margin: 0;
        }

        header h1 {
            background: #FF9966;
        }

        .arrow-right {
            display: inline-block;
            width: 0;
            height: 0;
            border-top: 18px solid transparent;
            border-bottom: 18px solid transparent;
            border-left: 18px solid #FF9966;
            margin-bottom: -11px;
        }

        #content,#content1 {
            padding: 20px;
            color: #333;
        }

        input, textarea {
            font-size: 100%;
        }
    </style>
</head>
<body>
<header>
    <h1>地理位置</h1>
    <div class="arrow-right"></div>
    <h2>让浏览器提供你的地址信息</h2>
</header>
<div id="content"></div>
<script>
    var content = document.getElementById("content");
    content.style.height = window.innerHeight+"px";
    var initialLocation;
    var siberia = new google.maps.LatLng(60, 105);
    var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
    var map;
    var infowindow = new google.maps.InfoWindow();
    var mapOptions = {
        zoom:13,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    };

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, onError);
        // also monitor position as it changes
        navigator.geolocation.watchPosition(showPosition);
    } else {
        onError();
    }

    function showPosition(position) {
        map = new google.maps.Map(document.getElementById("content"), mapOptions);

        var lat = position.coords.latitude;
        var lng = position.coords.longitude;

        initialLocation = new google.maps.LatLng(lat, lng);
        map.setCenter(initialLocation);
        infowindow.setContent("你的经纬度："+lat + " " + lng);
        infowindow.setPosition(initialLocation);
        infowindow.open(map);
    }

    function onError() {
        if (navigator.geolocation) {
            initialLocation = newyork;
            contentString = "Error: The Geolocation service failed.";
        } else {
            initialLocation = siberia;
            contentString = "Error: Your browser doesn't support geolocation. Are you in Siberia?";
        }
        mapOptions.zoom = 4;
        map = new google.maps.Map(document.getElementById("content"), mapOptions);
        map.setCenter(initialLocation);
        infowindow.setContent(contentString);
        infowindow.setPosition(initialLocation);
        infowindow.open(map);
    }
</script>
</body>
</html>​